<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>43 - 节流 防抖</title>
</head>
<body>
    <input type="button" value="节流按钮" class="throttle">
    <input type="button" value="防抖按钮" class="antiShake">

    <script>

        // 节流和防抖区别:
        // a)  节流      当程序中频繁的执行某个事件, 节流只执行第一次结果
        // b)  防抖      当程序中频繁的执行某个事件, 防抖只执行最后一次结果
        
        // 节流和防抖的相同点:
        // 为了避免在短时间之内频繁执行某个事件 (动作)
        // 都是为了减轻服务端的压力  





        // 如何使用节流实现?  节流只执行第一次结果
        // 分析找突破口:
        // 1. 事件中的代码用户只要一点击就立马执行
        // 2. 需要点击事件中的代码只执行第一次,后面的不执行
        // 加一个约束的条件,满足条件,我就执行,不满足条件不执行
        
        // 如果flag的值是123,那么就执行代码,否则不执行
        let flag = 123;
        let throttle = document.querySelector('.throttle');
        throttle.onclick= function() {
            if(flag == 123) {
                console.log('数据已发送');
                console.log('服务端以响应...');
                flag = 456;
            };
        };





        //如何实现防抖? 当程序频繁的执行某个事件,只让事件执行最后一次结果
        //防抖的突破口: 让代码等一段时间执行  (延迟函数)
        let antiShake = document.querySelector('.antiShake');
        let timeID;
        antiShake.onclick= function() {
            // 先清除延迟函数
            clearTimeout(timeID);
            timeID = setTimeout(function(){
                console.log('数据已发送');
                console.log('服务端以响应...');
            }, 500);
        };





    </script>
</body>
</html>